<template>
	<view class="sms-container" v-if="isShow">
		<view class="sms-dialog">
			<!-- 第一行：请输入短信验证码 -->
			<view class="sms-dialog-text">请输入短信验证码</view>
			<!-- 第二行：手机号 -->
			<view class="sms-dialog-phone">{{ phoneNumber }}</view>
			<!-- 第三行：圆角 view 容器 -->
			<view class="sms-input-container">
				<!-- 左边图标 -->
				<uni-icons type="email" color="#ccc" size="25"></uni-icons>

				<!-- <image src="/static/icon_ok.png" mode="aspectFit" class="sms-input-icon"></image> -->
				<!-- 中间输入框 -->
				<input v-model="code" placeholder-class="sms-placeholder" placeholder="请输入验证码" class="sms-input-field"
					maxlength="6" />
				<!-- 右边倒计时按钮 -->
				<text :disabled="isCounting" @click="onReSend" class="sms-countdown-btn">
					{{ isCounting ? `${countdown}s` : '重新发送' }}
				</text>
			</view>
			<!-- 第四行：蓝色圆角 button -->
			<button @click="handleNextStep" class="sms-next-btn">下一步</button>
		</view>
	</view>
</template>

<script>
	import request from '@/js/request.js';
	export default {
		name: 'SmsInputDialog',
		props: {
			phoneNumber: {
				type: String,
				default: ''
			},
			isShow: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {
				fPhoneNumber: "",
				code: '',
				isCounting: false,
				countdown: 60
			};
		},
		//组件改成oncreate
		created() {
			this.startCountdown();
		},


		methods: {
			async sendSmsPostRequest() {
				// 准备要发送的 JSON 数据

				const jsonData = {
					phone: this.phoneNumber,
					//todo:
					//0 银速 1天明 2左新凰 3亿韬科技
					type: 0
				};
				try {
					var resp = await request("/api/credit/sendSms", jsonData);
				} catch (error) {}

			},
			async checkSmsCode() {
				// 准备要发送的 JSON 数据
				const jsonData = {
					phone: this.phoneNumber,
					code: this.code
				};
				try {
					await request("/api/credit/checkSms", jsonData);
					//校验成功
					this.$emit('next', this.code);

				} catch (error) {
					//TODO handle the exception
				}

			},
			formatPhoneNumber() {
				// 获取输入的手机号
				const phone = this.phoneNumber;
				// 验证手机号长度是否为 11 位
				if (phone.length === 11) {
					// 截取手机号前三位
					const start = phone.slice(0, 3);
					// 截取手机号后四位
					const end = phone.slice(-4);
					// 生成中间的 * 号，长度为手机号长度减去前三位和后四位
					const middle = '*'.repeat(phone.length - 3 - 4);
					// 拼接前三位、中间 * 号和后四位
					this.fPhoneNumber = start + middle + end;
				} else {
					// 若手机号长度不为 11 位，给出提示
					this.fPhoneNumber = '请输入有效的 11 位手机号';
				}
			},
			onReSend() {
				this.sendSmsPostRequest();
				this.startCountdown();

			},
			startCountdown() {
				this.isCounting = true;
				let timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(timer);
						this.isCounting = false;
						this.countdown = 60;
					}
				}, 1000);
			},
			handleNextStep() {
				if (this.code.length != 6) {
					uni.showToast({
						title: '请输入6位数验证码！',
						icon: 'none'
					});
					return;
				}
				this.checkSmsCode()
				// this.$emit('next', this.code);
			}
		}
	};
</script>

<style scoped>
	.sms-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;

	}

	.sms-dialog {
		position: fixed;
		width: 70%;
		max-width: 350px;
		background-color: #fff;
		border-radius: 10px;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		z-index: 999;

	}

	.sms-dialog-text {
		color: #666;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.sms-placeholder {
		font-size: 28rpx;
		color: #ccc;
	}

	.sms-dialog-phone {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 30rpx;
	}

	.sms-input-container {
		width: 100%;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.sms-input-icon {
		width: 40rpx;
		height: 40rpx;
		margin: 0 10rpx;
	}

	.sms-input-field {
		flex: 1;
		font-size: 30rpx;
		height: 40rpx;
		border: none;
		outline: none;
		padding: 0 10rpx;
	}

	.sms-countdown-btn {
		min-width: 120rpx;
		font-size: 25rpx;
		color: #007aff;
		border: none;

	}

	.sms-next-btn {
		width: 90%;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 5rpx;
		font-size: 30rpx;
	}
</style>